<template>
    <div>
        <el-card>
      <div class="common-layout">
        <el-container>
          <el-header>
            <span><strong>试卷管理</strong></span>
            <div class="create-btn">
              <el-button type="primary" @click="table = true">+ 创建试卷</el-button>
            </div>
          </el-header>
          <el-main>
            <el-table :data="tableData1" style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column property="examName" label="试卷名称" width="200">
              </el-table-column>
              <el-table-column property="classify" label="试卷分类" width="180" />
              <el-table-column property="number" label="试题数" width="100" />
              <el-table-column property="total" label="总分" width="100" />
              <el-table-column
                property="createPerson"
                label="创建人"
                width="100"
              />
              <el-table-column property="state" label="状态" width="100" />
              <el-table-column
                property="updateTime"
                label="更新时间"
                width="150"
              />
              <el-table-column label="操作" width="400" align="center">
                <el-button type="text" size="mini">预览</el-button>
                <el-button type="text" size="mini">复制</el-button>
                <el-button type="text" size="mini">发布</el-button>
                <el-button type="text" size="mini">编辑</el-button>
                <el-button type="danger" size="mini" text="danger"
                  >删除</el-button
                >
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer>
            <div class="page-wrapper">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
              />
            </div>
          </el-footer>
        </el-container>
      </div>
    </el-card>
    <!-- 抽屉页面 -->
    <el-drawer
      v-model="table"
      direction="rtl"
      size="70%"
    >
    <el-card>
      <div class="exam-layout">
        <span><strong>试卷管理</strong></span>
        <el-divider />
        <el-container>
          <el-header>
            <el-icon><Document /></el-icon
            ><el-text class="mx-1">基本信息</el-text>
            <div class="examName">
              <el-text class="mx-1" type="info">试卷名称</el-text>
              <el-input
                v-model="input"
                style="width: 240px; margin-left: 15px"
                placeholder="请输入试卷名称"
              />
            </div>
            <div class="examClassify">
              <el-text class="mx-1" type="info">试卷分类</el-text>
              <el-select
                v-model="value"
                placeholder="请选择试卷分类"
                style="width: 240px; margin-left: 15px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="examScore">
              <div
                style="
                  display: flex;
                  justify-content: center;
                  flex-direction: row;
                "
              >
                <div style="display: flex; flex-direction: column">
                  <span
                    style="
                      display: block;
                      color: red;
                      font-size: 40px;
                      margin-top: 50px;
                    "
                    >100分</span
                  >
                  <span style="margin-left: 40px"
                    ><el-text class="mx-1" type="info">总分</el-text></span
                  >
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    margin-left: 20px;
                    margin-top: 30px;
                  "
                >
                  <div style="display: flex; flex-direction: column">
                    <div style="margin: 0px 8px 0px 4px">
                      <el-text style="margin-right: 10px">快速设定分值</el-text>
                      <el-switch v-model="value1" />
                    </div>
                    <div style="margin: 5px">
                      <el-text class="mx-1" type="primary">单选</el-text>
                      <el-text class="mx-1">共10题</el-text>
                      <el-text class="mx-1">每题1分</el-text>
                    </div>
                    <div style="margin: 5px">
                      <el-text class="mx-1" type="primary">多选</el-text>
                      <el-text class="mx-1">共10题</el-text>
                      <el-text class="mx-1">每题1分</el-text>
                    </div>
                    <div style="margin: 5px">
                      <el-text class="mx-1" type="primary">判断</el-text>
                      <el-text class="mx-1">共10题</el-text>
                      <el-text class="mx-1">每题1分</el-text>
                    </div>
                    <div style="margin: 5px">
                      <el-text class="mx-1" type="primary">问答</el-text>
                      <el-text class="mx-1">共10题</el-text>
                      <el-text class="mx-1">每题1分</el-text>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-header>
          <span style="height: 20px"></span>
          <el-main>
            <el-icon><DocumentAdd /></el-icon>
            <el-text class="mx-1">添加试题</el-text>
            <div class="examBtn">
              <el-button type="primary"
                ><el-icon><List /></el-icon>从题库添加</el-button
              >
              <el-button
                ><el-icon><CirclePlus /></el-icon>单个添加</el-button
              >
              <el-button
                ><el-icon><DeleteFilled /></el-icon>批量删除</el-button
              >
            </div>
            <div class="examTopic">
              <el-table :data="tableData" height="250" style="width: 100%">
                <el-table-column prop="topic" label="题目" width="300" />
                <el-table-column prop="createPerson" label="创建人" width="100" />
                <el-table-column prop="topicType" label="题目类型" width="100" />
                <el-table-column prop="score" label="分值" width="100" />
                <el-table-column prop="updateTime" label="更新时间" width="150" />
                <el-table-column prop="answer" label="正确答案" width="200" />
                <el-table-column label="操作" width="100">
                  <el-button type="danger" size="mini" text="danger"
                    >删除</el-button
                  >
                </el-table-column>
              </el-table>
            </div>
          </el-main>
          <el-footer style="height: 100vh">
            <div class="examContent">
              <el-card style="max-width: 100%">
                <div class="examTitle">
                  <el-text tag="b">在Java中，什么是反射机制？</el-text>
                </div>
                <div class="examOption">
                  <el-radio-group v-model="radio">
                    <el-radio :value="1">Option A</el-radio>
                    <el-radio :value="2">Option B</el-radio>
                    <el-radio :value="3">Option C</el-radio>
                    <el-radio :value="4">Option D</el-radio>
                  </el-radio-group>
                </div>
              </el-card>
              <el-card shadow="never">
                <div class="answer" style="color: skyblue">
                  参考答案:
                  <span style="color: black">A</span>
                </div>
                <div class="examAnswer">这里是答案区域</div>
              </el-card>
            </div>
          </el-footer>
        </el-container>
      </div>
    </el-card>
    </el-drawer>

    </div>

  </template>
  
  <script setup>
  import { ref } from "vue";
  import { ElTable, ElDrawer} from "element-plus";
  
  const table = ref(false);
  const input = ref("");
  const value = ref("");
  const value1 = ref(false);
  const radio = ref(3);
  import {
    Document,
    DocumentAdd,
    List,
    CirclePlus,
    DeleteFilled,
  } from "@element-plus/icons-vue";
  
  const options = [
    {
      value: "面试题",
      label: "面试题",
    },
    {
      value: "编程语言题",
      label: "编程语言题",
    },
    {
      value: "前端开发",
      label: "前端开发",
    },
    {
      value: "数据库技术",
      label: "数据库技术",
    },
    {
      value: "算法与数据结构",
      label: "算法与数据结构",
    },
  ];
  const tableData = [
    {
      topic: "HTML5新特性",
      createPerson: "张三",
      topicType: "填空题",
      score: "20",
      updateTime: "2022-01-01",
      answer: "HTML5新特性",
    },
    {
      topic: "CSS3新特性",
      topicType: "单选题",
      score: "30",
      updateTime: "2022-01-02",
      answer: "A",
    },
    {
      topic: "JavaScript基础",
      topicType: "多选题",
      score: "40",
      updateTime: "2022-01-03",
      answer: "AB",
    },
  ];
  const tableData1 = ref([
    {
      examName: "Java面试题",
      classify: "面试题",
      number: "100",
      total: "100",
      createPerson: "admin",
      state: "启用",
      updateTime: "2022-01-02",
    },
    {
      examName: "Python面试题",
      classify: "面试题",
      number: "100",
      total: "100",
      createPerson: "admin",
      state: "启用",
      updateTime: "2022-01-02",
    },
    {
      examName: "数据库原理",
      classify: "数据库技术",
      number: "100",
      total: "100",
      createPerson: "admin",
      state: "启用",
      updateTime: "2022-01-02",
    },
    {
      examName: "web基础卷",
      classify: "编程语言题",
      number: "100",
      total: "100",
      createPerson: "admin",
      state: "启用",
      updateTime: "2022-01-02",
    },
    {
      examName: "算法与数据结构",
      classify: "算法与数据结构",
      number: "100",
      total: "100",
      createPerson: "admin",
      state: "启用",
      updateTime: "2022-01-02",
    },
  ]);
  </script>
  
  <style scoped>
  .page-wrapper {
    display: flex;
    justify-content: right;
  }
  .create-btn {
    float: right;
  }
  .mx-1 {
    font-size: 16px;
    margin-right: 5px;
  }
  .examName {
    margin-left: 20px;
    margin-bottom: 10px;
  }
  .examClassify {
    margin-left: 20px;
  }
  .examScore {
    margin: -10% 0% 0% 60%;
    min-width: 300px !important;
    min-height: 190px !important;
  }
  .examBtn {
    width: 100%;
    height: 50px;
    /* background-color: rgb(252, 248, 57); */
    margin-top: 20px;
  }
  .examTopic {
    width: 100%;
    height: 230px;
    /* background-color: rgb(255, 174, 0); */
    margin-top: 10px;
  }
  .examAnswer {
    margin: 15px 0px 0px 20px;
  }
  .examTitle {
    margin-left: 20px;
  }
  </style>
  